<!-- 业务关联分布统计图  -->
<template>
  <div id="relevance-chart-main">
    <div ref="relevanceChartContainer" class="relevance-chart-container"></div>
  </div>
</template>
<script>
import echarts from 'echarts'
import FullScreenMonitor from "@/api/FullScreenMonitor";
import {apiResult} from "@/libs/util";
// 按需引入
export default {
  name:"RelevanceDistChart",
  data(){
    return{
      api: new FullScreenMonitor(),
      chartOption:{
        tooltip: {
          trigger: "item",
          formatter: "{b}<br/>{c}",
        },
        title: {
          text: this.$t('business_relation'),//'业务关联分布',
          left: 'center',
          top: 'top',
          textStyle:{
            color: '#FFFFFF',
            fontSize: 18
          },
          padding: [
            0,  // 上
            10, // 右
            5,  // 下
            0, // 左
          ]

        },
        /*        tooltip: {
                  trigger: 'item'
                },*/
        legend: { //图例组件
          orient: 'vertical',
          left: 140,
          top: 30,
          align: 'left',
          itemGap: 5,
          itemWidth: 25,
          textStyle:{
            color: '#FFFFFF',
            fontSize: 10
          },
          tooltip: {
            show: true
          }
        },
        series: [
          {
            name: this.$t('business_relation'),//'业务关联分布',
            type: 'pie',
            left: 'left',
            radius: '50%',
            center: [80, 70],
            /*            itemStyle:{
                          color:['#5470c6',
                            '#91cc75',
                            '#fac858',
                            '#ee6666',
                            '#73c0de',
                            '#3ba272',
                            '#fc8452',
                            '#9a60b4',
                            '#ea7ccc'],
                        },*/
            data: [
              { value: 23, name: 'organization',
                itemStyle:{
                  color: '#03259d',
                }
              },
            ],
            /*            emphasis: {
                          itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                          }
                        },*/
            label: {
              show: false,
              position: 'right'
            },
          }
        ]
      }
    }

  },
  methods:{
    start(){
      let mychart = echarts.init(this.$refs.relevanceChartContainer);
      mychart.setOption(this.chartOption);
    },
    getData(){
      const that=this;
      this.api.getDeviceCountByOrg().then(res=>{
        //console.log(res);
        apiResult(res.data,false,result=>{
          let chartData = [];
          let style=[];
          style.push({color: '#03259d'})
          style.push({color: '#8845f8'})
          style.push({color: '#e30c0c'})
          style.push({color: '#32b7f8'})
          //console.log(">>>>>>RelevanceDistChart.getData: data=%o",res.data.data);
          if (!!res.data.data && res.data.data.length > 0){

            for(let i in res.data.data){
              let item = res.data.data[i];
              //this.$Message.info(item.name)
              if ("msg_other"===item.name){
                //this.$Message.error(this.$t("msg_other"))
                //console.log(">>>>>>RelevanceDistChart.getData: item.name=%o",item.name);
                item.name = this.$t("msg_other")
              }
              chartData.push({value: item.value, name: item.name,itemStyle:style[i]})
            }
            that.chartOption.series[0].data=chartData;
          }
          that.start();
        })
      })
    }
  },
  mounted() {
    this.getData();
  }
}

</script>
<style lang="less">
#relevance-chart-main{
  width: 100%;
  height: 100%;
}

.relevance-chart-container{
  margin-top: 20px;
  width: 100%;
  height: 100%;
}
</style>
